<template>
  <div class="contents">
    <PanelTitle title="主体分类" />
    <div ref="maps" class="maps mt"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import echarts from "@/components/echarts";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";
import { fitChartSize } from "@/utils/dataUtil.js";

const maps = ref(null);
onMounted(async () => {
  let res = await http({
    url: env.VITE_ZHER_DATA_CENTER + "/property/main/type/statist/list",
    method: "get",
    params: { year: new Date().getFullYear() },
  });

  // 1:种植 2:加工 3:流通 4:自然人 5:其他

  let pieData = res.data.map((item) => {
    let name = "";

    if (item.type == 1) {
      name = "种植主体";
    }else if (item.type == 2){
      name = "初加工主体";
    }else if (item.type == 3){
      name = "流通主体";
    }else if (item.type == 4){
      name = "自然人主体";
    }else if (item.type == 5){
      name = "其他";
    }
    return { value: item.num, name: name };
  });

  // let pieData = [
  //   { value: res.data.processRatio, name: "初加工主体" },
  //   { value: res.data.circulateRatio, name: "流通主体" },
  //   { value: res.data.plantRatio, name: "种植主体" },
  //   { value: res.data.naturalPersonRatio, name: "自然人主体" },
  //   { value: res.data.restsRatio, name: "其他" },
  // ];

  var myChart = echarts.init(maps.value);
  myChart.setOption({
    legend: {
      left: "left",
      icon: "rect",
      itemHeight: fitChartSize(7),
      itemWidth: fitChartSize(7),
      top: "bottom",
      width: "44%",
      left: fitChartSize(10),
      data: ["初加工主体", "流通主体", "种植主体", "自然人主体", "其他"],
      textStyle: {
        fontSize: fitChartSize(8),
        color: "#fff",
      },
    },
    tooltip: {
        trigger: 'item'
      },
    color: ["#00C0FF", "#00FCFF", "#1DC0DE", "#08EE8A", "#2871B5"],
    series: [
      {
        type: "pie",
        radius: [16, 60],
        center: ["50%", "45%"],
        roseType: "area",
        itemStyle: {
          // borderRadius: 5,
        },
        labelLine: {
          length: fitChartSize(10),
          length2: fitChartSize(54),
          lineStyle: {
            color: "#fff",
          },
        },
        labelLayout: {
          width: fitChartSize(90),
          verticalAlign: "bottom",
          align: "center",
          // dy: fitChartSize(-4),
          // dx: -40,
        },
        label: {
          show: true,
          borderWidth: 10,
          formatter: '{b} {d} %',
          color:'#fff'


        },
        data: pieData,
      },
    ],
  });
});
</script>

<style scoped lang="scss">
.contents {
  // background: linear-gradient(
  //   to bottom,
  //   rgba(5, 79, 99),
  //   rgba(5, 79, 99, 0.1),
  //   rgba(5, 79, 99)
  // );
  background: #054f63ee;
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}
.maps {
  height: vh(190);
  width: 100%;
}
</style>